<script setup lang="ts">
import {reactive} from "vue";
import {useSgesAStore} from "./storeSgesCalA.ts";
import {storeToRefs} from "pinia";

const store = useSgesAStore()
const {
  capChargeTotalSta,
  powerChargeTotalSta,
  totalChargeTime,
  cal_power,
  vibrant_para,
} = storeToRefs(store)
const formData = reactive({
  capChargeTotalSta: capChargeTotalSta,
  powerChargeTotalSta: powerChargeTotalSta,
  totalChargeTime: totalChargeTime,
  cal_power: cal_power,
  vibrant_para: vibrant_para
})
</script>

<template>
  <div>
    <n-tag>设计边界条件</n-tag>
    <!--     <p>{{ data1 }}</p>-->
    <!-- ref="formRef"是给表单起了个别名，为了在js中更方便的引用 -->
    <n-form id="sges1" ref="formRef" inline :label-width="120" size="small" :model="formData"
            label-placement="left">

      <n-form-item label="充电容量" path="form.capacityChargeTotalStation">
        <n-input-number name="Ccts" v-model:value="formData.capChargeTotalSta"
                        placeholder="输入储能电站总充电容量"
                        :show-button="false"></n-input-number>
        <label>MW·h</label>
      </n-form-item>
      <n-popover :disabled="formData.cal_power">
        <template #trigger>
          <n-form-item label="储能时长" path="total_charge_time">
            <n-input-number name="tct" v-model:value="formData.totalChargeTime" placeholder="输入储能时长"
                            :disabled="!formData.cal_power">
              :show-button="true">
            </n-input-number>
            <label>h</label>
          </n-form-item>
        </template>
        <span>设置充电功率，储能时长将自动计算</span>
      </n-popover>
      <n-switch v-model:value="formData.cal_power"/>
      <n-popover :disabled="!formData.cal_power">
        <template #trigger>
          <n-form-item label="充电功率" path="form.capacityChargeTotalStation">
            <n-input-number name="Pcts" v-model:value="formData.powerChargeTotalSta" :disabled="formData.cal_power"
                            :show-button="false"></n-input-number>
            <label>MW</label>
          </n-form-item>
        </template>
        <span>设置储能时长，充电功率将自动计算</span>
      </n-popover>
      <n-form-item label="计算参数" path="form.vibrant_para">
        <n-select v-model:value="formData.vibrant_para" :options="store.vibrant_option"/>
        <label>MW·h</label>
      </n-form-item>
    </n-form>
  </div>
</template>

<style scoped>
.n-tag {
  background-color: coral;
  width: 100%;
}

.n-input-number {
  width: 120px;
}

.n-form-item {
  min-width: 310px;
}

.label {
  min-width: 120px;
}

.div {
  padding: 1px !important;
}
</style>